<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目类型')" prop="dealName">
        <dict-select
          v-model="params.stageType"
          dictionary="deal_type"
          :clearable="false"
          @change="stageTypeChange"
        />
      </el-form-item>
      <el-form-item :label="$t('项目状态')" prop="dealStatus">
        <dict-select
          v-model="queryParams.dealStatus"
          dictionary="deal_status"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="dealName">
        <UserSelect
          v-model="queryParams.personCharge"
          :placeholder="$t('选择用户')"
        />
      </el-form-item>

      <el-form-item :label="$t('预计投资时间')" prop="dealName">
        <DatePicker
          v-model="dateRange"
          type="daterange"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle(queryParams.stageType)">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row v-loading="loadChart" justify="middle">
      <el-col v-loading="loadChart" :span="24">
        <Empty :data="chartData">
          <barLineChart v-if="chartData.datas.length > 0" ref="barChart" :chart-data="chartData" height="300px" @clickHandel="clickHandel" />
        </Empty>
      </el-col>
      <el-col :span="24">
        <div class="area-header">
          <span class="area-header-title">{{ $t('项目阶段详情') }}</span>
        </div>
        <el-table v-loading="loading" :data="tableList" border>
          <el-table-column :label="$t('项目名称')" show-overflow-tooltip align="center" prop="dealName">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId, gpId: scope.row.gpId}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('公司名称')" show-overflow-tooltip align="center" prop="companyName">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/company/base/companyBaseHome',query:{companyId:scope.row.companyId}}"
                class="link_a"
              >{{ scope.row.companyName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('负责人')" align="center" prop="personCharge" show-overflow-tooltip min-width="130">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.personCharge) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('预计投资时间')" align="center" prop="dateInvestmentEstimate" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.dateInvestmentEstimate) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('预计投资金额') + $t('金额单位')" align="center" prop="amountInvestmentEstimate" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.amountInvestmentEstimate, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('阶段名称')" align="center" prop="dealStageName" show-overflow-tooltip min-width="130">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.dealStageName) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="pageData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import barLineChart from '@/views/chart/barLineChart.vue'
  import { countDealStage, findByNodeId } from '@/api/base/deal/dealBase'
    export default {
    components: {
        barLineChart
    },
      data() {
          return {
            chartData: {},
            tableList: [],
            loadChart: false,
            loading: false,
            total: 0,
            typeList: [],
            params: {
              pageNum: 1,
              pageSize: 10,
              nodeId: undefined,
              stageType: undefined,
              personCharge: undefined,
              dealStatus: undefined,
              beginTime: undefined,
              endTime: undefined
            },
            // 记录上一次点击事件传的参数值
            previousVal: undefined,
            dateRange: [],
            queryParams: {
              stageType: undefined,
              personCharge: undefined,
              dealStatus: undefined,
              beginTime: undefined,
              endTime: undefined
            }
          }
      },
      created() {
        this.getDicts('deal_type').then(response => {
          this.typeList = response.data
          this.params.stageType = this.typeList[0].dictValue
          this.getList(this.params.stageType)
          this.pageData()
        })
      },
      methods: {
        getList(stageType) {
          this.loadChart = true
          console.log(stageType)
          this.queryParams.stageType = stageType
          countDealStage(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.loadChart = false
            var rows = response.data || []
            if (rows.length > 0) {
              this.chartData.xLabel = rows.map(el => this.$t(el.nodeName))
              this.chartData.legend = false
              this.chartData.seriesLabelShow = true
              this.chartData.barWidth = 20
              this.chartData.datas = [
                {
                  type: 'bar',
                  name: '',
                  data: rows.map(ele => { return { value: ele.count, name: this.$t(ele.nodeName), sort: ele.sort, amount: ele.amount, nodeId: ele.nodeId } })
                }
              ]
            } else {
              this.chartData = []
            }
          })
        },
        clickHandel(val) {
          this.loading = true
          if (val) {
            this.params.nodeId = val.nodeId
          }
          if (this.previousVal === this.params.nodeId) {
            this.params.nodeId = undefined
          }
          this.pageData()
          this.previousVal = this.params.nodeId
        },
        // 点击分页查询
        pageData() {
          this.loading = true
          this.params.personCharge = this.queryParams.personCharge
          this.params.beginTime = this.queryParams.beginTime
          this.params.endTime = this.queryParams.endTime
          this.params.dealStatus = this.queryParams.dealStatus
          findByNodeId(this.addDateRange(this.params, this.dateRange)).then(response => {
            this.tableList = response.rows
            this.total = response.total
            this.loading = false
          })
        },
        stageTypeChange(val) {
          this.getList(val)
          this.pageData()
          this.params.nodeId = undefined
        },
        /** 搜索按钮操作 */
        queryHandle(stageType) {
          this.queryParams.pageNum = 1
          this.getList(stageType)
          this.pageData()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.dateRange = []
          this.queryParams.personCharge = undefined
          this.queryParams.dealStatus = undefined
          this.queryParams.beginTime = undefined
          this.queryParams.endTime = undefined
          this.params.beginTime = undefined
          this.params.endTime = undefined
          this.params.personCharge = undefined
          this.params.dealStatus = undefined
          this.queryHandle(this.queryParams.stageType)
        }
      }
    }
</script>

<style scoped>

</style>
